<template>
    <view class="bg-white px-4 w-350px m-auto mt-2">
        <view class="flex items-center gap-2">
            <image class="w-72 h-72 flex-shrink-0" mode="aspectFit" :src="xun" />
            <view class="flex-1 overflow-hidden">
                <view class="flex items-start" v-for="i in list" :key="i.id" @click="handleClick(i.id)">
                    <view class="w-2 h-2 bg-gray-600 rounded-full mt-2 mr-2 flex-shrink-0"></view>
                    <text class="text-gray-700 text-sm leading-relaxed truncate">{{i.title}}</text>
                </view>
            </view>
            <view class="flex items-center gap-1 w-content flex-shrink-0" @click="handleMore">
                <text class="text-gray-500 text-sm">更多</text>
                <image class="w-30 h-72 rounded-full" mode="aspectFit" :src="right" />
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import xun from '@/assets/img/xun.png';
import right from '@/assets/svg/right.svg';
import Taro from '@tarojs/taro';
import { onMounted, ref } from 'vue';
import { request } from '@/service/request';

const handleClick = (i: any) => {
    Taro.navigateTo({
        url: `/package-other/articles/index?id=${i}`
    });
};

const handleMore = () => {
    Taro.navigateTo({
        url: '/package-home/articles/index'
    });
};

onMounted(()=>{
    getList();
})

const list = ref<any[]>([])

//请求接口/news_shop/newsShop/list
async function getList(){
//   openid
  const {success, error} = await request.get<any>('/news_shop/newsShop/list', {
    pageNo: 1,
  }, {
        useErrMsg: true
  });
  if(success){
    list.value = success.records.slice(0, 2)
  }
  // res list
}
</script>
